 import React,{Component} from 'react';
// import './test.less'
import {PullToRefresh, ListView, Button, Toast} from 'antd-mobile';
import 'antd-mobile/dist/antd-mobile.css';
import http from "../../model/http";
let pageIndex = 0;
export default class Test extends React.Component {
     constructor(props) {
         super(props);
         const dataSource = new ListView.DataSource({
             rowHasChanged: (row1, row2) => row1 !== row2,
         });
         this.state = {
             dataSource,
             datas:[],
             pageIndex:1,
             refreshing: true,
             isLoading: true,
             hasMore:true,
             useBodyScroll: false,
             dataBlobs: {},
             sectionIDs:[],
             rowIDs:[],
             dataArr:[],//关键代码
         };
     }
     genData(ref=false,page=1) {
         //获取数据
         let that=this;
         http.outPost('/customer/searchCustomer',{
             params:'20091',
             page:page,
             items:10,
             hosId:6,
             userId:'ChenXianLin',
             managerId:1407611596788060161
         }).then(function (res){
             if(res.result==0){
                 const lg = res.data.length;
                 if(lg<=0){
                     Toast.success('没有更多数据了~',1);
                     that.state.isLoading=false
                     that.state.hasMore=false
                     return false;
                 }
                 let dataArr = that.state.dataArr;//关键代码
                 let m=that.state.datas;
                 for (let i = 0; i < lg; i++) {
                     //每一次读取的数据都进行保存一次
                     dataArr.push(`row - ${((parseInt(that.state.pageIndex)-1) * lg) + i}`);
                     m.push(res.data[i])
                 }
                 if(ref){
                     //这里表示刷新使用
                     that.setState({
                         datas:res.data,
                         pageIndex:that.state.pageIndex+1,
                         dataSource: that.state.dataSource.cloneWithRows(dataArr),
                         refreshing: false,
                         isLoading: false,
                         //保存数据进state
                         dataArr:dataArr
                     });
                 }else{
                     //这里表示上拉加载更多
                     that.rData = { ...that.rData, ...dataArr };
                     that.setState({
                         datas:m,
                         pageIndex:that.state.pageIndex+1,
                         dataSource: that.state.dataSource.cloneWithRows(that.rData),
                         refreshing: false,
                         isLoading: false,
                         //保存数据进state
                         dataArr:dataArr
                     });
                 }
             }else{
                 Toast.fail('请求失败',1.5);
             }



         });
     }

     componentDidMount() {
         this.genData(true,1);
     }
     onRefresh = () => {
         let that=this;
         this.setState({ refreshing: true, isLoading: true,pageIndex:1 });
         setTimeout(() => {
             that.genData(true,0);
         }, 2000);
     };
     onEndReached = (event) => {
         if (this.state.isLoading && !this.state.hasMore) {
             return;
         }
         this.setState({ isLoading: true });
         let that=this;
         setTimeout(() => {
             that.genData(false,this.state.pageIndex);
         }, 1000);
     };
     //这下面的代码跟官网没啥区别，唯一不同的是把外部定义的数据都保存进了state
     render() {
         const separator = (sectionID, rowID) => (
             <div
                 key={`${sectionID}-${rowID}`}
                 style={{
                     backgroundColor: '#F5F5F9',
                     height: 8,
                     borderTop: '1px solid #ECECED',
                     borderBottom: '1px solid #ECECED',
                 }}
             />
         );
         let index = this.state.datas.length - 1;
         const row = (rowData, sectionID, rowID) => {
             if (index < 0) {
                 index = this.state.datas.length - 1;
             }
             const obj = this.state.datas[index--];
             return (
                 <div key={rowID}
                      style={{
                          padding: '0 15px',
                          backgroundColor: 'white',
                          height:'4rem'
                      }}
                 >
                     <div style={{ height: '50px', lineHeight: '50px', color: '#888', fontSize: '18px', borderBottom: '1px solid #ddd' }}>
                         {obj.title}
                     </div>
                     <div style={{ display: 'flex', padding: '15px' }}>
                         <div style={{ display: 'inline-block' }}>
                             <div style={{ fontSize: '16px' }}>
                                 {obj.customerName}
                                 <span style={{ fontSize: '30px', color: '#FF6E27' }}>{parseInt(rowID) +1}</span>
                             </div>
                         </div>
                     </div>
                 </div>
             );
         };
         return (<div>
             <ListView
                 key={this.state.useBodyScroll ? '0' : '1'}
                 // ref={el => this.lv = el}
                 dataSource={this.state.dataSource}
                 renderFooter={() => (<div style={{ padding: 30, textAlign: 'center' }}>
                     {this.state.isLoading ? 'Loading...' :(!this.state.hasMore ?'loaded':'加载完毕，没有更多数据了~') }
                 </div>)}
                 renderRow={row}
                 renderSeparator={separator}
                 useBodyScroll
                 style={this.state.useBodyScroll ? {} : {
                     border: '1px solid #ddd',
                     margin: '5px 0',
                 }}
                 pullToRefresh={<PullToRefresh
                     refreshing={this.state.refreshing}
                     onRefresh={this.onRefresh}
                 />}
                 onEndReachedThreshold={1000}
                 onEndReached={this.onEndReached}
                 pageSize={10}
             />
         </div>);
     }
 }
